<template>
  <div id="app">
    <!-- 使用state的几种方式 -->

    <!-- 方式1中的this可以省略不写 -->
    <div>方式1: name = {{ this.$store.state.name }}</div>

    <!-- 方式2采用的是计算属性 -->
    <div>方式2: age = {{ getAge }}</div>

    <!-- 方式3借助mapState辅助函数 -->
    <div>方式3: sex = {{ sex }}</div>
    <div>方式3: addr = {{ addr }}</div>
  </div>
</template>

<script>
// 方式3 导入mapState函数
import { mapState } from 'vuex'

export default {
  computed: {
    // 方式2
    getAge() {
      return this.$store.state.age;
    },

    // 方式3, mapState辅助函数, 把store中的数据映射到组件的计算属性中.
    ...mapState(['sex', 'addr']) // 采用数组形式引入state属性, 并且可以接收多个值.
  }
}
</script>

<style>
</style>
